@charset "utf-8";
/**
  by dhj
**/
$font-12: 12px;
$font-14: 14px;
$font-16: 16px;
$font-18: 18px;
$font-20: 20px;
$font-22: 22px;
$font-24: 24px;

$color-01: #171717;
$color-02: #515151;
$color-03: #909090;
$color-04: #c1c1c1; //(输入框边框颜色)
$color-05: #eeeeee; //(背景色)
$color-06: #499af5;
$color-07: #ffb30e;
$color-08: #e43f3f;
h1,h2,h3,h4,h5,h6{
  margin: 0;
}
p{
  margin: 0;
}
.extend-aline{
  &:hover{
    text-decoration: underline;
  }
}

.extend-box-shadow{
  background: #ffffff;
  box-shadow: 0 0 5px rgba(81, 81, 81, 0.2);
}
//标题导航修改
.zcbl-tmodal-1{
  width:930px;
  //height:600px;
  margin: 10% auto;
  background-color: #fff;
  padding:40px 0;
  border-radius: 4px;
  .zcbl-tmodal-row{
    margin-bottom: 16px;
    padding-left: 15px;
    p{
      margin: 0 25px;
      float: left;
      color: $color-02;
      input,select{
        margin-left: 16px;
        width: 298px;
        height:50px;
        padding: 10px;
      }
    }
  }
  .zcbl-tmodal-row:after{
    display: table;
    content: "";
    clear: both;
  }
  .zcbl-tmodal-subbtn{
    text-align: center;
    margin-top: 50px;
    button{
      width:130px;
      height: 50px;
      background-color: $color-07;
    }
  }
}

//上传漫画
.zcbl-tmodal-1{
  .zcbl-tmodal-tabinput{
    text-align: center;
    p{
      color: $color-02;
      input{
        width: 796px;
        height: 50px;
        margin-left: 16px;
      }
    }
  }
  .zcbl-tmodal-add{
    text-align: center;
    position: relative;
    height: 260px;
    width: 200px;
    margin: 0 auto;
    margin-top: 80px;
    margin-bottom: 50px;
    .per-pub-add{
      background: #ffffff;
      border: 1px dashed #aaaaaa;
      text-align: center;
      width:200px;
      height: 260px;
      p{
        &.per-pub-addIcon{
          position: relative;
          width: 65px;
          height: 65px;
          margin: 65px auto 0 auto;
          input[type=file]{
            position: absolute;
            top:0;
            left: 0;
            z-index: 2;
            width: 65px;
            height: 65px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
          }
          a{
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            z-index: 1;
          }
          &:before{
            content: "";
            position: absolute;
            top:0;
            left: 0;
            z-index: 0;
            background: url("../../../images/pc/icon/icon-pub-add.png");
            width: 65px;
            height: 65px;
          }
        }
        &.per-pub-addSC{
          font-size: 16px;
          font-weight: bolder;
          color: #9a9a9a;
          padding: 20px 0 0 0;
        }
        &.per-pub-addZS,&.per-pub-addDX{
          font-size: 14px;
          color: #9a9a9a;
          line-height: 20px;
          margin: 0;
        }
      }
    }
  }
}

//上传视频
.zcbl-tmodal-1{
  .zcbl-tmodal-tabvinput{
    text-align: center;
    div{
      color: $color-02;
      input{
        width: 732px;
        height: 50px;
        margin-left: 16px;
      }
    }
    p{
      margin-top: 20px;
      color: $color-03;
      font-size: 12px;
    }
  }
  .zcbl-tmodal-add{
    text-align: center;
    position: relative;
    height: 260px;
    width: 200px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 78px;
    .per-pub-add{
      background: #ffffff;
      border: 1px dashed #aaaaaa;
      text-align: center;
      width:200px;
      height: 260px;
      p{
        &.per-pub-addIcon{
          position: relative;
          width: 65px;
          height: 65px;
          margin: 65px auto 0 auto;
          input[type=file]{
            position: absolute;
            top:0;
            left: 0;
            z-index: 2;
            width: 65px;
            height: 65px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
          }
          a{
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            z-index: 1;
          }
          &:before{
            content: "";
            position: absolute;
            top:0;
            left: 0;
            z-index: 0;
            background: url("../../../images/pc/icon/icon-pub-add.png");
            width: 65px;
            height: 65px;
          }
        }
        &.per-pub-addSC{
          font-size: 16px;
          font-weight: bolder;
          color: #9a9a9a;
          padding: 20px 0 0 0;
        }
        &.per-pub-addZS,&.per-pub-addDX{
          font-size: 14px;
          color: #9a9a9a;
          line-height: 20px;
          margin: 0;
        }
      }
    }
  }
}

//上传图片
.zcbl-tmodal-0{
  width:930px;
  margin: 7% auto;
  background-color: #fff;
  border-radius: 4px;
  .per-pub-picBox{
    ul{
      margin-left: 30px;
      margin-bottom: 30px;
      li{
        float: left;
        width: 200px;
        height: 260px;
        margin: 20px 7px 0 8px;
        &.per-pub-add{
          background: #ffffff;
          border: 1px dashed #aaaaaa;
          text-align: center;
          p{
            &.per-pub-addIcon{
              position: relative;
              width: 65px;
              height: 65px;
              margin: 75px auto 0 auto;
              input[type=file]{
                position: absolute;
                top:0;
                left: 0;
                z-index: 2;
                width: 65px;
                height: 65px;
                cursor: pointer;
                opacity: 0;
                z-index: 2;
                filter:alpha(opacity=0);
                -moz-opacity:0;
                -khtml-opacity: 0;
                opacity: 0;
              }
              a{
                display: inline-block;
                width: 100%;
                height: 100%;
                position: absolute;
                top:0;
                left: 0;
                z-index: 1;
              }
              &:before{
                content: "";
                position: absolute;
                top:0;
                left: 0;
                z-index: 0;
                background: url("../../../images/pc/icon/icon-pub-add.png");
                width: 65px;
                height: 65px;
              }
            }
            &.per-pub-addSC{
              font-size: 16px;
              font-weight: bolder;
              color: #9a9a9a;
              padding: 20px 0 0 0;
            }
            &.per-pub-addZS,&.per-pub-addDX{
              font-size: 14px;
              color: #9a9a9a;
              line-height: 20px;
              margin: 0;
            }
          }
        }
        .per-pub-img{
          height: 200px;
          width: 200px;
          overflow: hidden;
          background: #ffffff;
          &:hover{
            .per-pub-edit{
              display: block;
            }
          }
          img{
            max-width: 200px;
            max-height: 200px;
            cursor: pointer;
          }
          position: relative;
        }
        .per-pub-noImg{
          height: 200px;
          width: 200px;
          background: #ffffff;
          border:  1px solid #9a9a9a;
          .per-pub-progress{
            width: 180px;
            height: 18px;
            border: 3px solid $color-07;
            border-radius: 10px;
            margin: 90px auto 0 auto;
            padding: 0 3px;
            span{
              display: inline-block;
              height: 6px;
              background: $color-07;
              border-radius: 6px;
              margin:3px 0;
            }
          }
        }
        .per-pub-edit{
          //border: 1px solid $color-07;
          height: 57px;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          //background: $color-ffffff;
          p{
            float: left;
            width: 50%;
            line-height: 57px;
            a{
              display: block;
              width: 100%;
            }
            &.per-pub-editFM{
              padding-left: 12px;
              a{
                color: $color-07;
                position: relative;
                &:after{
                  position: absolute;
                  top:10px;
                  right: 6px;
                  content: "";
                  background: url("../../../images/pc/icon/icon-pub-fm.png") no-repeat;
                  width: 36px;
                  height: 36px;
                }
              }
            }
            &.per-pub-editDel{
              float: right;
              padding-right: 12px;
              text-align: right;
              width: 50px;
              a{
                color: #9a9a9a;
                position: relative;
                &:after{
                  content: "";
                  position: absolute;
                  left: 6px;
                  top: 10px;
                  background: url("../../../images/pc/icon/per-album-del-1.png") no-repeat;
                  width: 25px;
                  height: 25px;
                }
              }
            }
          }
        }
        .per-pub-tit{
          height: 50px;
          border: 1px solid #9a9a9a;
          margin-top: 10px;
          font-size: 14px;
          color: #9a9a9a;
          text-align: center;
          line-height: 50px;
          input{
            width: 100%;
            height: 100%;
            border: none;
            background: none;
            text-align: center;
          }
          a{
            color: #9a9a9a;
            &:hover{
              @extend .extend-aline;
            }
          }
        }
      }
    }
  }
  .zcbl-tmodal-subbtn{
    text-align: center;
    margin-top: 50px;
    padding-bottom: 30px;
    button{
      width:130px;
      height: 50px;
      background-color: $color-07;
    }
  }
}


/**
  * 申请开通 - 模态框
  * ===================
  */
.tribe-apply-model {
  background: #FFF;
  height: 420px;
  width: 650px;
  margin-top: -210px;
  padding-top: 70px;
  padding-bottom: 70px;
  //border:1px solid red;

  // Form 表单
  & > form {
    background: #FFF;
    //border:1px solid red;
    height: 100%;
    font-size: $font-18;
    color: $color-01;

    .checkbox {
      &:nth-child(1) {
        margin-bottom: 114px;
        margin-left: -120px;
      }
      &:nth-child(2) {
        margin-bottom: 70px;
        margin-left: -120px;
      }

      label {
        margin-left: 103px;
      }
      input {
        margin-right: 10px;
      }
    }

  }

}

/**
* 添加、编辑 - 剧集 - 模态框
* ===================
*/
.tribe-novel-model {
  position: absolute;
  padding-top: 36px;
  top: 50%;
  left: 50%;
  margin: -345px 0 0 -465px;
  background: #FFF;
  height: 690px;
  width: 930px;
  //border:1px solid red;

  .form-group{
    margin-left: 0;
    .col-md-offset-1{
      margin-left: 40px;
    }
    label{
      margin: 0;
      margin-left: 40px;
      padding-right: 16px;
      line-height: 50px;
    }
    input{
      width: 783px;
      height: 50px;
    }
  }
}

